<template>
    <div class="container scopClass">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="地块ས་ཆ།" name="地块" > -->
            <el-tab-pane label="地块" name="地块">
                <el-row style="margin: 20px 0">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0; width: 300px" placeholder="请输入关键词"
                            v-model="searchName1">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch1"
                                style="background-color: #1BC46D;color: #fff;">搜索</el-button>
                        </el-input>
                    </el-col>

                    <el-button type="primary" style="float: right; margin-right: 10px" @click="addplot" v-if="!added"
                        v-show="$store.state.zangw == '1'">新增地块གསར་དུ་འཕར་བའི་ས་ཆ་</el-button>
                    <el-button type="warning" plain style="float: right; margin-right: 10px" @click="addplot" v-if="!added"
                        v-show="$store.state.zangw == '2'">新增地块</el-button>
                </el-row>
                <el-table :data="tableData1" border ref="multipleTable" header-cell-class-name="table-header">
                    <!-- <el-table-column prop="name" sortable label="地块名称ས་ཆའི་མིང་" ></el-table-column> -->
                    <el-table-column prop="name" sortable label="地块名称་"></el-table-column>
                    <!-- <el-table-column prop="area" sortable label="面积རྒྱ་ཁྱོན།" > -->
                    <el-table-column prop="area" sortable label="面积">
                        <template slot-scope="scope">
                            <span>{{ scope.row.area }}</span>
                            <span style="margin-left: 4px" v-show="$store.state.zangw == '1'">亩གནས་ཚད་</span>
                            <span style="margin-left: 4px" v-show="$store.state.zangw == '2'">亩</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="peasantName" sortable label="农户ཞིང་དུད་" v-show="$store.state.zangw=='1'"></el-table-column>
                    <el-table-column prop="principalName" sortable label="管理员དོ་དམ་པ་" v-show="$store.state.zangw=='1'"></el-table-column>
                    <el-table-column prop="status" sortable label="状态རྣམ་པ་" v-show="$store.state.zangw=='1'"></el-table-column>
                    <el-table-column prop="pName" sortable label="所属基地ཁོངས་གཏོགས་རྟེན་གཞི་" v-show="$store.state.zangw=='1'"></el-table-column> -->
                    <el-table-column prop="peasantName" sortable label="农户"
                        v-show="$store.state.zangw == '2'"></el-table-column>
                    <el-table-column prop="principalName" sortable label="管理员"
                        v-show="$store.state.zangw == '2'"></el-table-column>
                    <el-table-column prop="status" sortable label="状态" v-show="$store.state.zangw == '2'"></el-table-column>
                    <el-table-column prop="pName" sortable label="所属基地"
                        v-show="$store.state.zangw == '2'"></el-table-column>
                    <el-table-column label="操作" width="200" align="center" v-show="$store.state.zangw == '2'">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '1'">编辑རྩོམ་སྒྲིག</el-button>
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '2'">编辑</el-button>
                            <!--<el-button
                                type="text"
                                @click="handleView(scope.$index, scope.row)"
                            >查看</el-button> -->
                            <el-button v-if="!lotCode" type="text" @click="handleYard(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '1'">地块码ས་ཨང་</el-button>
                            <el-button v-if="!lotCode" type="text" @click="handleYard(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '2'">地块码་</el-button>
                            <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '1'">删除སུབ་པ་</el-button>
                            <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '2'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1"
                    @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1"
                    style="margin-top: 20px"></el-pagination>
            </el-tab-pane>
            <!-- <el-tab-pane label="仓库མཛོད་ཁང་" name="仓库" > -->
            <el-tab-pane label="仓库" name="仓库">
                <el-row style="margin: 20px 0">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0; width: 300px" placeholder="请输入关键词"
                            v-model="searchName2">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch2">搜索</el-button>
                        </el-input>
                    </el-col>

                    <el-button type="primary" v-if="!added" style="float: right; margin-right: 10px"
                        @click="addwarehouse">新增仓库</el-button>
                </el-row>
                <el-table :data="tableData2" border ref="multipleTable" header-cell-class-name="table-header">
                    <!-- <el-table-column prop="name" sortable label="货位名称ཟོང་གནས་ཀྱི་མིང་" ></el-table-column>
                    <el-table-column prop="area" sortable label="所属仓库ཁོངས་གཏོགས་མཛོད་ཁང་" > -->
                    <el-table-column prop="name" sortable label="货位名称"></el-table-column>
                    <el-table-column prop="area" sortable label="所属仓库">
                        <template slot-scope="scope">
                            <span>{{ scope.row.warehouse }}</span>
                            <span style="margin-left: 4px"></span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="basesoild" sortable label="所属基地ཁོངས་གཏོགས་རྟེན་གཞི་" ></el-table-column> -->
                    <el-table-column prop="basesoild" sortable label="所属基地་"></el-table-column>

                    <el-table-column label="操作" width="250" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="!edit" type="text" @click="handleEditck(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '1'">编辑རྩོམ་སྒྲིག</el-button>
                            <el-button v-if="!binCode" type="text" @click="handleView(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '1'">仓位码མཛོད་ཁང་ཨང་</el-button>
                            <el-button v-if="!edit" type="text" @click="handleEditck(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '2'">编辑</el-button>
                            <el-button v-if="!binCode" type="text" @click="handleView(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '2'">仓位码་</el-button>
                            <el-button type="text" style="color: red" @click="handleDeletecw(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '1'">删除སུབ་པ་</el-button>
                            <el-button type="text" style="color: red" @click="handleDeletecw(scope.$index, scope.row)"
                                v-show="$store.state.zangw == '2'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2"
                    @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2"
                    style="margin-top: 20px"></el-pagination>
            </el-tab-pane>
            <!-- <el-tab-pane label="建筑ཨར་ལས།" name="建筑" > -->
            <el-tab-pane label="建筑" name="建筑">
                <el-row style="margin: 20px 0">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0; width: 300px" placeholder="请输入关键词"
                            v-model="searchName3">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch3">搜索</el-button>
                        </el-input>
                    </el-col>

                    <el-button type="primary" v-if="!added" style="float: right; margin-right: 10px"
                        @click="architecture">新增建筑</el-button>
                </el-row>
                <el-table :data="tableData3" border ref="multipleTable" header-cell-class-name="table-header">
                    <!-- <el-table-column prop="name" sortable label="建筑名称ཨར་ལས་ཀྱི་མིང་" ></el-table-column>  -->
                    <el-table-column prop="name" sortable label="建筑名称་"></el-table-column>
                    <!-- <el-table-column prop="area" sortable label="面积རྒྱ་ཁྱོན།" > -->
                    <el-table-column prop="area" sortable label="面积">
                        <template slot-scope="scope">
                            <span>{{ scope.row.area }}</span>
                            <!-- <span style="margin-left: 4px" >亩གནས་ཚད་</span> -->
                            <span style="margin-left: 4px">亩</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pName" sortable label="所属基地"></el-table-column>

                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button v-if="!edit" type="text" @click="handleEditjz(scope.$index, scope.row)" >编辑རྩོམ་སྒྲིག</el-button> -->
                            <el-button v-if="!edit" type="text"
                                @click="handleEditjz(scope.$index, scope.row)">编辑</el-button>

                            <el-button type="text" style="color: red"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize3"
                    @current-change="handleCurrentChange3" :total="total3" :current-page.sync="currentPage3"
                    style="margin-top: 20px"></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="地块码" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="long" label="二维码边长（cm）"></el-table-column>
                <el-table-column property="long1" label="建议扫描距离（米）"></el-table-column>
                <el-table-column property="address" label="下载链接">
                    <template slot-scope="scope">
                        <el-button type="text" @click="downloadpng(scope.$index, scope.row)">
                            下载
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios'
import { base_findByList, base_delete, base_findByPositionList, base_deleteCangWei, basesoil_download } from '@/request/api';

export default {
    data() {
        return {
            gridData: [{
                long: "8cm",
                long1: "0.5m"
            },
            {
                long: "12cm",
                long1: "0.8m"
            },
            {
                long: "15cm",
                long1: "1m"
            },
            {
                long: "30cm",
                long1: "1.5m"
            },
            {
                long: "50cm",
                long1: "2.5m"
            }
            ],
            dialogTableVisible: false,
            activeName: '地块',
            searchName1: '',
            searchName2: '',
            searchName3: '',
            tableData1: [],
            tableData2: [],
            tableData3: [],
            total1: 0,
            currentPage1: 1,
            pagesize1: 10,
            total2: 0,
            currentPage2: 1,
            pagesize2: 10,
            total3: 0,
            currentPage3: 1,
            pagesize3: 10,

            listUrl: '',
            action: '',
            added: true,
            lotCode: true,
            edit: true,
            binCode: true,
            id: '',
            longid: ''
        };
    },
    created() { },
    mounted() {
        this.init1();
        this.init2();
        this.init3();
        this.judgmentAuthority();
    },
    destroyed: function () { },
    methods: {
        architecture() {
            this.$router.push({
                path: '/digitalMap',
                query: { type: 4 }
            });
        },
        addwarehouse() {
            this.$router.push({
                path: '/digitalMap',
                query: { type: 3 }
            });
        },
        //新增地块
        addplot() {
            this.$router.push({
                path: '/digitalMap',
                query: { type: 2 }
            });
        },
        handleYard(index, row) {
            this.dialogTableVisible = true;
            this.longid = row.id
            // /basesoil/download/
            // axios({
            //        method: 'GET',
            //        url: '/basesoil/download/' + row.id +"?size=" + ,

            //        responseType: 'blob'
            //    }).then(res=>{
            //        //
            //       this.downloadFile(res, '地块码.png')
            //    }).catch(err=>{

            //    })

        },
        downloadpng(index, row) {
            if (row.long == "8cm") {
                var size = 227
            }
            if (row.long == "12cm") {
                var size = 334
            }
            if (row.long == "15cm") {
                var size = 425
            }
            if (row.long == "30cm") {
                var size = 850
            }
            if (row.long == "50cm") {
                var size = 1417
            }
            axios({
                method: 'GET',
                url: '/basesoil/download/' + this.longid + "?size=" + size,

                responseType: 'blob'
            }).then(res => {
                //
                this.downloadFile(res, '地块码.png')
            }).catch(err => {

            })
        },
        downloadFile(res, fileName) {
            let blob = new Blob([res.data]);
            if (!fileName) {
                fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
                const elink = document.createElement('a');
                elink.download = fileName;
                elink.style.display = 'none';
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href);
                document.body.removeChild(elink);
            }
        },
        init1() {
            let data = {
                page: this.currentPage1,
                type: '2',
                name: this.searchName1
            };
            base_findByList(data).then((res) => {
                this.tableData1 = res.rows;
                this.total1 = res.total;
                var _this = this;
                // for(let p = 0; p<this.tableData1.length; p++){
                // 	if(this.tableData1[p].status == "0"){
                // 		this.tableData1[p].statusString = "休耕"
                // 	} else {
                // 		this.tableData1[p].statusString = "种植中"
                // 	}
                // }

            });
        },
        init2() {
            let data = {
                pageno: this.currentPage1,
                pagesize: 10,
                name: this.searchName2
            };
            base_findByPositionList(data).then((res) => {
                console.log(res);
                this.tableData2 = res.rows;
                this.total2 = res.total;
                var _this = this;
                // for (let i = 0; i < this.tableData.length; i++) {
                //     if(this.tableData[i].state == 0){
                //         _this.tableData[i].stateful = "休耕"
                //     }else{
                //         _this.tableData[i].stateful = "种植中"
                //     }

                // }
            });
        },
        init3() {
            let data = {
                page: this.currentPage1,
                type: '4',
                name: this.searchName3
            };
            base_findByList(data).then((res) => {
                this.tableData3 = res.rows;
                this.total3 = res.total;
                var _this = this;
                // for (let i = 0; i < this.tableData.length; i++) {
                //     if(this.tableData[i].state == 0){
                //         _this.tableData[i].stateful = "休耕"
                //     }else{
                //         _this.tableData[i].stateful = "种植中"
                //     }

                // }
            });
        },

        // tabs
        handleClick(tab, event) { },
        //编辑地块
        handleEdit(index, row) {
            this.$router.push({
                path: '/digitalMap',
                query: { id: row.id, type: '2', isshow: true }
            });
        },
        //编辑仓库
        handleEditck(index, row) {
            this.$router.push({
                path: '/digitalMap',
                query: { id: row.basesoilId, type: '3', isshow: true }
            });
        },
        //编辑建筑
        handleEditjz(index, row) {
            this.$router.push({
                path: '/digitalMap',
                query: { id: row.id, type: '4', isshow: true }
            });
        },
        // 查看
        handleView(index, row) {

        },
        // 删除
        handleDelete(index, row) {
            // console.log(row.id)
            base_delete(row.id).then((res) => {
                this.$notify({
                    title: '提示',
                    message: '删除成功',
                    type: 'success'
                });
                this.init1();
                this.init2();
                this.init3();
            });
        },
        //删除仓位
        handleDeletecw(index, row) {
            base_deleteCangWei(row.id).then((res) => {
                this.$notify({
                    title: '提示',
                    message: '删除成功',
                    type: 'success'
                });
                this.init1();
                this.init2();
                this.init3();
            });
        },

        // 列表搜索
        handleSearch1() {
            this.currentPage1 = 1;
            this.init1();
        },
        handleSearch2() {
            this.currentPage2 = 1;
            this.init2();
        },
        handleSearch3() {
            this.currentPage3 = 1;
            this.init3();
        },

        // 分页事件
        handleCurrentChange1(val) {
            this.currentPage1 = val;
            this.init1();
        },
        handleCurrentChange2(val) {
            this.currentPage2 = val;
            this.init2();
        },
        handleCurrentChange3(val) {
            this.currentPage3 = val;
            this.init3();
        },

        uploadonchange(file) { },
        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
            type.map((item1) => {
                if (item1.name == '基地管理' && item1.children != null) {
                    for (var i = 0; i < item1.children.length; i++) {
                        if (item1.children[i].name == '新增') this.added = false;
                        if (item1.children[i].name == '编辑') this.edit = false;
                        if (item1.children[i].name == '地块码') this.lotCode = false;
                        if (item1.children[i].name == '仓位码') this.binCode = false;
                    }
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru {
    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;
    }
}

/deep/.el-tabs__item.is-active {
    color: #1BC46D;
}

/deep/.el-tabs__active-bar {
    background-color: #1BC46D;
}

.el-col {
    margin-bottom: 0;
}

/* .scopClass .el-table{ margin-top: 20px;} */
.el-pagination {
    text-align: center;
}

/*
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
} */

.list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    .vfor {
        width: 24%;
        margin-right: 1%;
        border: 1px solid #1BC46D;
        margin-top: 1vw;
        height: 586px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.04);
        border-radius: 6px;
        overflow: hidden;

        .top {
            width: calc(100% - 40px);
            height: 289px;
            background: linear-gradient(180deg, #1BC46D 0%, rgba(27, 196, 109, 0.25) 100%);
            padding: 20px;

            .title {
                font-size: 24px;
                color: #FFFFFF;
                margin-bottom: 16px;
            }

            .img {
                width: 100%;
                height: 240px;
                border-radius: 2px;
                overflow: hidden;
            }
        }

        .detail {
            padding: 24px;
            border-bottom: 2px solid rgba(0, 0, 0, 0.06);

            .address {
                font-size: 18px;
                margin-bottom: 20px;

                .title {
                    color: #7b7b7b;
                }

                .name {
                    color: #0c131b;
                }
            }

            .df {
                display: flex;
                justify-content: space-between;
                width: 100%;

                .address {
                    width: 50%;
                }

                .name {
                    display: inline-block;
                    width: 40%;
                }
            }
        }

        .bottom {
            padding: 16px 0;
            display: flex;

            .com {
                width: 33%;
                text-align: center;
                border-right: 1px solid #dadada;
            }

            .edit {
                color: #409EFF;
            }

            .code {
                color: #3B3B3B;
            }

            .detele {
                color: #FF5F57;
            }
        }
    }

    .vfor:nth-child(4n) {
        margin-right: 0;
    }
}
</style>
